<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有好货</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/product_category.css">
    <!-- 网页logo -->
    <link rel="shortcut icon" href="./img/wylogo.png">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3019949_apjq287p52.css">
</head>

<body>
<!-- 顶部导航条 -->
<nav id="top_nav">
    <ul id="nav_left">
        <li>
            <div id="xian1">
                <span>中国大陆</span>
                <i class="fa fa-arrow-down"></i>
                <div id="hidden1">
                    <ul id="hidden_ul">
                        <li><a href="#">全球</a></li>
                        <li><a href="#">中国大陆</a></li>
                        <li><a href="#">中国香港</a></li>
                        <li><a href="#">中国台湾</a></li>
                        <li><a href="#">中国澳门</a></li>
                        <li><a href="#">韩国</a></li>
                        <li><a href="#">马来西亚</a></li>
                        <li><a href="#">日本</a></li>
                        <li><a href="#">澳大利亚</a></li>
                        <li><a href="#">新西兰</a></li>
                        <li><a href="#">加拿大</a></li>
                        <li><a href="#">越南</a></li>
                        <li><a href="#">泰国</a></li>
                        <li><a href="#">菲律宾</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="li_left">
            <a href="login.html" style="color: red;">亲，请登录</a>
        </li>
        <li class="li_left">
            <a href="register.html">免费注册</a>
        </li>
        <li class="li_left">
            <a href="#">手机逛淘宝</a>
        </li>
    </ul>
    <ul id="nav_right">
        <li>
            <a href="index.html" style="color: red;">
                淘宝网首页
            </a>
        </li>
        <li id="wdtb">
            <a href="#">
                我的淘宝
                <i class="fa fa-arrow-down"></i>
                <div id="hidden2">
                    <a href="#">已买到的宝贝</a>
                    <a href="#">我的足迹</a>

                </div>
            </a>
        </li>
        <li>
            <a href="#" style="color: red;">
                <i class="fa fa-shopping-cart"></i>
                购物车
            </a>
        </li>
        <li id="scj">
            <a href="#">
                <i class="fa fa-star"></i>
                收藏夹
                <i class="fa fa-arrow-down"></i>
                <div id="hidden3">
                    <a href="#">收藏的宝贝</a>
                    <a href="#">收藏的店铺</a>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                商品分类
            </a>
        </li>
        <li id="mjzx">
            <a href="#">
                千牛卖家中心
                <i class="fa fa-arrow-down"></i>
            </a>
        </li>
        <li id="lxkf">
            <a href="#">
                联系客服
                <i class="fa fa-arrow-down"></i>
            </a>
        </li>
    </ul>

</nav>
<!-- 顶部图片 -->
<div id="top_img">
    <img src="./img/product_top_img.png">
</div>
<!-- 中部 -->
<div id="center">
    <div id="center_img">
        <img src="./img/img1.png">
    </div>
    <div id="descript">
        <h3>
            <a href="#"> 骨瓷超大早餐杯</a>
        </h3>
        <div>麦片杯，牛奶杯，水杯，陶瓷创意杯子</div>
        <div>一看到这套餐具，俺的少女心就融化了！可爱值满分！我买了一套送给新婚的朋友，红色、粉色和白色的搭配，也符合婚庆的风格。</div>
        <div id="buttonlist">
            <div id="price">￥19.9</div>
            <div id="check">
                <a href="#">查看宝贝&gt;</a>
            </div>
            <div id="tubiao">
                <i class="iconfont icon-xiaolian"></i>
                <span>0人说好</span>
            </div>

        </div>
    </div>
</div>


<section id="section_bottom">
    <div id="end">
        <i class="iconfont icon-fengexian"></i>
        <span>END</span>
        <i class="iconfont icon-fengexian"></i>
    </div>
    <div id="bottomIcon">
        <div class="bottom_icon">
            <div class="icon">
                <i class="iconfont icon-dunpai"></i>
                <div>消费者保障</div>
            </div>
            <div class="icon_info">
                <a href="#">保障范围</a>&nbsp;&nbsp;
                <a href="#">退货退款流程</a>&nbsp;&nbsp;
                <a href="#">服务中心</a>
                <a href="#">更多特色服务</a>
            </div>
        </div>
        <div class="bottom_icon">
            <div class="icon ">
                <i class="iconfont icon-bangzhu"></i>
                <div>新手上路</div>
            </div>
            <div class="icon_info">
                <a href="#">新手专区</a>&nbsp;&nbsp;
                <a href="#">消费警示</a>&nbsp;&nbsp;
                <a href="#">交易安全</a>&nbsp;&nbsp;
                <a href="#">24小时在线帮助</a>&nbsp;&nbsp;
                <a href="#">免费开店</a>
            </div>
        </div>
        <div class="bottom_icon">
            <div class="icon">
                <i class="iconfont icon-yifukuan"></i>
                <div>付款方式</div>
            </div>
            <div class="icon_info">
                <a href="#">快捷支付</a>&nbsp;&nbsp;
                <a href="#">信用卡</a>&nbsp;&nbsp;
                <a href="#">金额宝</a>&nbsp;&nbsp;
                <a href="#">蚂蚁花呗</a>&nbsp;&nbsp;
                <a href="#">货到付款</a>
            </div>
        </div>
        <div class="bottom_icon">
            <div class="icon ">
                <i class="iconfont icon-taobaotese"></i>
                <div>淘宝特色</div>
            </div>
            <div class="icon_info">
                <a href="#">手机淘宝</a>&nbsp;&nbsp;
                <a href="#">旺旺/旺信</a>&nbsp;&nbsp;
                <a href="#">大众评审</a>&nbsp;&nbsp;

            </div>
        </div>
    </div>

</section>
</body>

</html>